<template>
  <div class="member-container">
    <div class="member-header">会员中心</div>
    <div class="member-content">
      <div class="member-card">
        <div class="card-header">会员卡</div>
        <div class="card-body">
          <div class="card-info">
            <div class="info-item">会员等级：{{ memberInfo.level }}</div>
            <div class="info-item">有效期至：{{ memberInfo.expiryDate }}</div>
          </div>
        </div>
      </div>
      <div class="member-benefits">
        <div class="benefits-header">会员权益</div>
        <div class="benefits-list">
          <div v-for="benefit in memberInfo.benefits" :key="benefit.id" class="benefit-item">{{ benefit.title }}</div>
        </div>
      </div>
      <div class="member-actions">
        <button @click="handleRenew">续费会员</button>
        <button @click="handleUpgrade">升级会员</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      memberInfo: {
        level: '高级会员',
        expiryDate: '2024-12-31',
        benefits: [
          { id: 1, title: '无限下载高品质音乐' },
          { id: 2, title: '畅听独家音乐专辑' },
          { id: 3, title: '享受会员专属优惠' }
        ]
      }
    };
  },
  methods: {
    handleRenew() {
      // 处理续费逻辑
    },
    handleUpgrade() {
      // 处理升级逻辑
    }
  }
};
</script>

<style>
.member-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.member-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.member-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.member-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.member-benefits {
  margin-bottom: 20px;
}

.benefits-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.benefit-item {
  margin-bottom: 5px;
}

.member-actions button {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #0088cc;
  color: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
}

.member-actions button:last-child {
  margin-bottom: 0;
}
</style>